<template>
	<div class="app-container"  v-loading="loading" @contextmenu.prevent="">
		
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="3">
						<el-input v-model="queryParams.batch_no" placeholder="请输入批次号" clearable />
					</el-col>
					<el-col :span="7">
						<el-button :loading="loading" type="primary" @click="handleQuery">
							<template #icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :strtype="strtype"></FilterColumn>
			</div>
		</div>
		
		
		<el-card shadow="never">
			
			<div class="action-row">
				<el-button v-hasPerm="['wms.Allot/save']"   @click="handleDo('','act_add')" type="primary" plain><template #icon><i-ep-plus /></template>新增</el-button>
				<el-button v-hasPerm="['wms.Allot/read']"  @click="handleDo('', 'act_info')" :disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)" plain><template #icon><i-ep-document/></template>查看</el-button>
			</div>
	
			<el-table 
				ref="dataTableRef" 
				v-loading="loading" 
				:data="tableData" 
				align="left"
				tooltip-effect="dark"
				:show-overflow-tooltip="true"  border
				@cell-mouse-enter="rowMouse"
				@cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column 
						:label="item.label" 
						:align="item.align" 
						:prop="item.prop" 
						:width="item.width"
						:min-width="item.minwidth">
							<template #default="scope" v-if="item.prop == 'batch_no'">
							<el-link type="primary" @click="handleDo(scope.row, 'act_info')">{{ scope.row.batch_no }}</el-link>
							</template>
							<template #default="scope" v-if="item.prop == 'type'">
								<el-tag type="primary">调拨</el-tag>
							</template>
					</el-table-column>
				</template>

				
			</el-table>

			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>
		
		<!-- 查看表单内容 -->
		<receiptAllot ref="receiptAllotRef"  @initRefreshList="handleQuery" ></receiptAllot>
		
	</div>
</template>
<script setup lang="ts">
	defineOptions({
		name: "Stockroom",
		inheritAttrs: false,
	});

	import receiptAllot from './receipt/allot.vue'
	//接口地址
	import {
		
		getAllotList,
		getAllotAdd
	} from "@/api/wms";


	import { useTableFilterStore } from "@/store/modules/tableFilter";
	const TableFilter = useTableFilterStore();
	const strtype = ref('vmsAllotbound')
	
	// 表格标题
		const cTitles = ["ID","批次号","出仓公司","出仓库","入仓公司","入仓库","调拨时间","备注","操作人"];
		// 显示字段
		const sTitles = ["批次号","出仓公司","出仓库","入仓公司","入仓库","调拨时间","备注","操作人"];
		// 字段属性	
		const cColumns =[
			{ label: "ID",prop:"id",align:"center",width:80 },
			{ label: "批次号",prop:"batch_no",align:"center",minwidth:200 },
			{ label: "出仓公司", prop:"outbound_company.name",align:"center",minwidth:200 },
			{ label: "出仓库",prop:"outbound_stockroom.name",align:"center",minwidth:150 },
			{ label: "入仓公司",prop:"inbound_company.name",align:"center",minwidth:200},
			{ label: "入仓库", prop:"inbound_stockroom.name",align:"center",minwidth:150 },
			{ label: "备注",prop:"mark",align:"center",minwidth:200 },
			{ label: "调拨时间",prop:"allot_time",align:"center",minwidth:150 },
			{ label: "操作人",prop:"user.name",align:"center",minwidth:120 },
		]	
		interface TableGlobalLocal {
		  [key: string]: any; // 或者更具体的类型
		}
		// 列表渲染
		function cColumnsList(){
			const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
			if(ColumnsList)
			{
				const columnMap:any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
				// 预先建立label到对象的映射  
				for (const column of cColumns) {  
					columnMap[column.label] = column;  
				}  
				const newList = [];  
				for (const label of ColumnsList) {  
					// 尝试从映射中获取对象  
					const foundColumn = columnMap[label];  
					if (foundColumn) {  
						// 如果找到了，则添加到newList中  
						newList.push(foundColumn);  
					}  
				}  
				return newList;  
			}
			else
			{
					return [];
			}
		};
		// 列表-数据列初始化
		function columnsInit() {
		  const dropColStr:string =strtype.value + '_dropCol';
		  const checklistStr:string = strtype.value + '_checklist';
		  const drop_col:any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		  const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]; 
		  if(!drop_col)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr]=JSON.parse(JSON.stringify(cTitles));
		  }
		  if(!checklist)
		  {
			  (TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles)) ;
			  (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr]=JSON.parse(JSON.stringify(sTitles));
		  }
		}
	
	
	const receiptAllotRef = ref();
	//m默认搜索字段
	const queryParamsData = {
		page: 1,
		limit: 20,
		batch_no: "",//批单号
		inbound_sid: "",//入库仓库
		outbound_sid: "",//出库仓库
		inbound_cid: "",//入库公司
		outbound_cid: ""//出库公司
	}
	//搜索-字段配置
	const queryParams = reactive(JSON.parse(JSON.stringify(queryParamsData)));
	const loading = ref(false);
	const total = ref(0);
	const tableData = ref();
	const multipleSelection = ref<any>([]);
	const menuLineVisible = ref(true);
	const rowR = ref<any>({});
	
	// 行菜单事件
	function rowMouse(row : any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val : any) {
		multipleSelection.value = val
	}
	// 操作按钮样式
	function buttonType(val : number) {
		if (val === 1) {
			return 'primary'
		} else {
			return 'info'
		}
	}
	// 操作
	 function handleDo(row:any, act:string) {
		let  uItem:any= {}
		switch (act) {
			case 'act_add':
				receiptAllotRef.value.handleShow({}, act)
				break
			case 'act_info':
				receiptAllotRef.value.handleShow(JSON.parse(JSON.stringify(row || multipleSelection.value[0])), act)
				break	
			case 'act_del':
				// handleDelete(JSON.parse(JSON.stringify(row || multipleSelection.value[0])))
				break
			default:	
		}
	}

	//获取仓库信息列表
	function handleQuery() {
		loading.value = true;
		getAllotList(queryParams).then((res) => {
			console.log(res);
			tableData.value = res.data.list;
			total.value = res.data.count;
		}).finally(() => {
			loading.value = false;
		})
	}
	/**
	 * 重置查询
	 */
	function resetQuery() {
		handleQuery();
	}
	onMounted(() => {
		handleQuery();
		columnsInit();
	})
</script>



<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.min220 {
		width: 220px
	}
</style>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>